<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: #fff; border-bottom: 1px solid #ebeef5">
        <div class="common-layout-header">
          <div class="common-layout-header-title">
            <el-icon @click="back()">
              <ArrowLeft />
            </el-icon>
            {{ courseData.courseName }}
          </div>
          <div class="common-layout-header-button">
            <!-- 搜索表单 -->
            <el-form inline class="search-form">
              <el-form-item label="班级名称：">
                <el-input v-model="className" placeholder="搜索班级" size="small" style="width: 200px; height: 30px"
                  @keyup.enter="getSelectClass" />
              </el-form-item>
              <!-- <el-form-item label="班级创建人：">
                <el-input v-model="classCreator" placeholder="搜索班级" size="small" style="width: 200px; height: 30px"
                  @keyup.enter="getSelectClass" />
              </el-form-item> -->
              <el-form-item label="授权状态：" style="width: 170px; height: 30px">
                <el-select placeholder="请选择" v-model="stateAuthorization">
                  <el-option label="全部" value="-1"></el-option>
                  <el-option label="已授权" value="1"></el-option>
                  <el-option label="未授权" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getSelectClass">搜索</el-button>
                <el-button @click="
                  classCreator = '';
                className = '';
                ">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :data="coursesClassList">
          <el-table-column prop="className" label="班级名称"> </el-table-column>
          <!-- <el-table-column prop="creatorName" label="创建者"></el-table-column> -->
          <el-table-column prop="studentNumber" sortable label="班级人数"></el-table-column>
          <el-table-column label="课程授权">
            <template #default="{ row }">
              <el-switch v-model="row.isAuthorized" class="ml-2" style="
                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #ff4949;
                " @change="watchClassAuthorization(row)" />
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { ElTable, ElTableColumn, ElInput, ElAutocomplete } from "element-plus";
import {
  selectClassGradeService,
  selectClassBySearchKeyService,
  addClassGradeService,
} from "@/api/classgrade/classGrade.js";
import { ArrowLeft } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import router from "@/router";
const route = useRoute();
//授权状态
const stateAuthorization = ref("-1");
const className = ref(""); //搜索班级
const classCreator = ref("");
const coursesClassList = ref([]);
//存放课程对象
const courseData = ref({});

onMounted(() => {
   courseId.value = route.query.courseId
  selectClassGrade(route.query.courseId);
});

const courseId = ref();


const selectClassGrade = async (courseId) => {
  //console.log("courseId" + courseId);
  let result = await selectClassGradeService(courseId);
  coursesClassList.value = result.data;
}


const getSelectClass = async () => {
  let params = {
    courseId: courseId.value,
    className: className.value,
    createName: classCreator.value,
    isAuthorized: stateAuthorization.value,
  };
  //console.log("-------------------params");
  //console.log(params);

  const result = await selectClassBySearchKeyService(params);
  if (result.code == 200) {
    //console.log("-------------------result");
    //console.log(result.data);
    coursesClassList.value = result.data;
  }
};

const back = () => {
  //console.log("back");
  router.push("/course/CourseMangement");
};

const watchClassAuthorization = async (e) => {
  //consoole.log("watchClassAuthorization");
  // let params={
  //   courseId:courseData.value.courseId,
  //   classId:e.classId,
  //   isAuthorized:e.isAuthorized
  // }
  // console.log(params);
  let params = new URLSearchParams();
  params.append("courseId", route.query.courseId);
  params.append("classId", e.classId);
  params.append("isAuthorized", e.isAuthorized);

  await addClassGradeService(params);
};
</script>

<style scoped>
.common-layout-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  /* 添加内边距以增加间距 */
}

.common-layout-header-title {
  font-size: 20px;
  display: flex;
  align-items: center;
  /* 垂直居中箭头图标和文本 */
}

.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  /* margin-top: 20px; */
}

/* 或者，如果您希望所有表单项都有相同的高度，可以添加如下样式 */
.el-form-item {
  height: 30px;
  display: flex;
  align-items: center;
}
</style>